<template>
  <div class="me-page">
    <!--<headBar  isBack="show">-->
      <!--<div slot="xm-header-center">-->
        <!--<div class="xm-header-title" >熊猫币</div>-->
      <!--</div>-->
      <!--<div slot="xm-header-right"></div>-->
    <!--</headBar>-->
    <section class="pandaBi">
        <div class="item border-bottom flex" v-for="item in pandaList">
          <div class="item-left flex-1">
            <h4>{{item.type}}</h4>
            <span>{{item.create_time}}</span>
          </div>
          <span class="money" :class="{gain : item.type_icon=='+'}">{{item.type_icon}}{{item.coins_num}}</span>
        </div>
    </section>
    <!--数据为空-->
    <nodata textContent="很抱歉，没有熊猫币记录哦" v-show="pandaList.length<=0"></nodata>
  </div>
</template>
<script>
  export default {
    props: {},
    data() {
      return {
          pandaList:[],
      };
    },
    methods: {
        pandaCoins(){
            pandaCoins().then(data=>{
              this.pandaList=data.result.pandaCoinsList;
            });
        }
    },
    created() {
        this.pandaCoins();
    },
    mounted(){},
    components: {
    }
  };
</script>
<style lang="less" scoped>
.pandaBi{
  .item{
    height: .98rem;
    padding:.19rem .33rem;
    box-sizing: border-box;
    background: #fff;
    .item-left{
      h4{
        margin-bottom: .1rem;
        font-size: .24rem;
        color: #333;
      }
      span{
        font-size: .2rem;
        color: #999;
      }
    }
    .money{
      line-height: .6rem;
      font-size: .32rem;
      color: #333;
      &.gain{
        color: #FF4A4A;
      }
    }
  }
}
</style>
